<script>
import {getUser} from "../utils/utils";
import {data} from "autoprefixer";

export default {
  name: "Message",
  data(){
    return{
      showFlag:1,
      user:{},
      showData:[],
      allData:[],
      title:'用户消息',
      dialogVisible:false,
      deliveryMessage:{},
      trackNum:''
    }
  },
  methods:{
    view(message){

    },
    del(message){
      this.$axios.post('message/del?id='+message.id).then(resp=>{
        if (resp.data.flag){
          this.$message.success(resp.data.msg)
          this.getList()
        }else {
          this.$message.error(resp.data.msg)
        }
      })
    },
    accept(message){
      let fd = new FormData
      Object.keys(message).forEach(key=>{
        if (!(key==='childParentRelation'||key==='orderId')){
          fd.append(key,message[key])
        }
      })
      this.$axios.post('bp/accept',fd).then(resp=>{
        if (resp.data.flag){
          this.$message.success(resp.data.msg)
        }else {
          this.$message.error(resp.data.msg)
        }
      })
    },
    setShow1(){
      this.showData=[]
      this.allData.forEach(data=>{
        if (data.type===0){
          this.showData.push(data)
        }
      })
      this.title='用户消息'
    },
    setShow2(){
      this.showData=[]
      this.allData.forEach(data=>{
        if (data.type===1){
          this.showData.push(data)
        }
      })
      this.title='系统消息'
    },
    setShow3(){
      this.showData=[]
      this.allData.forEach(data=>{
        if (data.type===3||data.type===4){
          this.showData.push(data)
        }
      })
      this.title='发货信息'
    },
    setShow4(){
      this.showData=[]
      this.allData.forEach(data=>{
        if (data.type===2){
          this.showData.push(data)
        }
      })
      this.title='管理员通知'
    },
    delivery(message){
      this.deliveryMessage=message
      this.dialogVisible=true
    },
    giveYou(){
      if (!this.trackNum){
        this.$message.info('请输入快递单号！')
        return
      }
      this.$axios.post('order/delivery?orderId='+this.deliveryMessage.orderId+'&messageId='+this.deliveryMessage.id+'&trackNum='+this.trackNum).then(resp=>{
        if (resp.data.flag){
          this.$message.success(resp.data.msg)
          this.dialogVisible=false
          this.getList()
          this.deliveryMessage={}
        }else
          this.$message.error(resp.data.msg)
      })
    },
    getList(){
      this.$axios.get('message/list?userId='+this.user.id).then(resp=>{
        this.allData=resp.data
        this.setShow1()
      })
    },
  },
  created() {
    this.user=getUser()
    this.getList()
  }
}
</script>

<template>
<div>
  <el-dialog
    title="请输入订单号"
    :visible.sync="dialogVisible"
    width="30%">
    <el-input v-model="trackNum" placeholder="请输入快递单号"></el-input>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="giveYou()">确 定</el-button>
    </span>
  </el-dialog>

  <div>
    <el-button type="primary" plain @click="setShow1">用户消息</el-button>
    <el-button type="primary" plain @click="setShow2">系统消息</el-button>
    <el-button type="primary" plain @click="setShow3">发货信息</el-button>
    <el-button type="primary" plain @click="setShow4">管理员通知</el-button>
  </div>
  <div>
    <div>
      <div class="mainuse">
        <div>
          <el-card shadow="hover" style="width: 98%; height: auto" v-for="message in showData">
            <div slot="header" class="clearfix">
              <span style="font-size: larger;color: chartreuse">{{ title }}</span>
              <span>{{message.creattime}}</span>&nbsp;&nbsp;&nbsp;
              <!--<el-button style="float: right; padding: 3px 0" type="text" @click="view(message)">查看</el-button>-->
              <el-button style="float: right; padding: 3px 0" type="success" @click="del(message)" v-if="message.type===2||message.type===1">删除</el-button>
              <el-button style="float: right; padding: 3px 0" type="success" @click="accept(message)" v-if="message.type===0&&message.state===0">接受</el-button>
              <el-button style="float: right; padding: 3px 0" type="info"  v-if="message.type===0&&message.state===1">已接受</el-button>
              <el-button style="float: right; padding: 3px 0" type="primary" @click="delivery(message)" v-if="message.type===3">发货</el-button>
              <el-button style="float: right; padding: 3px 0" type="success" v-if="message.type===4">已发货</el-button>
              <br><br>
            </div>
            <div>
              <span v-html="message.message"></span><br><br>

              <span>发件人：{{message.creatby}}</span>


            </div>
          </el-card>
        </div>
    </div>
    </div>
<!--    <div v-if="showFlag===2">
      <div class="mainuse">
        <div>
          <el-card shadow="hover" style="width: 98%; height: auto" v-for="message in showData">
            <div slot="header" class="clearfix">
              <span>系统消息</span>
              <span>{{message.creattime}}</span>&nbsp;&nbsp;&nbsp;
              <el-button style="float: right; padding: 3px 0" type="text" @click="view(message)">查看</el-button>
              <el-button style="float: right; padding: 3px 0" type="success" @click="del(message)">删除</el-button>
              <br><br>
            </div>
            <div>
              <span>{{message.message}}</span><br><br>
              <span>发件人：{{message.creatby}}</span>
            </div>
          </el-card>
        </div>
      </div>
    </div>-->
  </div>
</div>
</template>

<style scoped>
.mainuse{
  margin-top: 10px;
  padding-left: 10px;
  column-count: 3;
  column-gap: 0;
  margin-bottom: 150px;
}
</style>
